<!DOCTYPE html>
<html>
<head>
<!--
  Copyright (c) 2015-2018 Jean-Marc VIGLINO, 
  released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
  <title>ol-ext: Hypsometric tints</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="description" content="Geoportail layer for ol" />
  <meta name="keywords" content="ol, openlayers, layer, elevation, hypsometric, tints" />

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@latest/ol.css" />
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/ol@latest/dist/ol.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
  
  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>
  <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
  <script src="https://unpkg.com/elm-pep"></script>

  <!-- filesaver-js -->
  <script type="text/javascript" src="https://cdn.rawgit.com/eligrey/FileSaver.js/aa9f4e0e/FileSaver.min.js"></script>

  <link rel="stylesheet" href="../style.css" />
  <style>
    #map {
      float: none;
    }
    p {
      margin: .5em 0 0;
    }
    #scale {
      border: 1px solid #369;
      display: inline-block;
    }
    #scale input {
      border: 0;
      text-align: center;
      width: 2em;
      float: left;
    }
  </style>
</head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: Hypsometric tints</h1>
  </a>
  <div class="info">
    This example use a TileWMS layer with an x-bil (Band Interleaved by Line) image format and a 
    <a href="https://openlayers.org/en/latest/apidoc/module-ol_Tile.html#~LoadFunction">tileLoadFunction</a>
    to display hypsometric tints.
  </div>

  <!-- DIV pour la carte -->
  <div id="map" style="width: 100%; height: 500px;"></div>
  layer: <select onchange="setLayer(this.value)">
    <option value=0>World SRTM3 MNT</option>
    <option value=2>French RGE-Alti</option>
    <option value=3>French BDAlti</option>
  </select>
  <br/>
  mode: <select onchange="useRGB = (this.value === 'rgb'); setLayer();">
    <option value='tints'>hyspometric</option>
    <option value='rgb'>rgb</option>
  </select>
  <p>Color scheme: </p>
  <div id="scale"></div>

<script>

var plan = new ol.layer.Tile({
  name: "OSM",
  className: 'plan',
  source: new ol.source.OSM(),
  visible: false
});
plan.addFilter(new ol.filter.CSS({ filter: 'grayscale(1)' }));

// The map
var map = new ol.Map ({
  target: 'map',
  view: new ol.View ({
    zoom: 3,
    center: [603942, 3475741]
  }),
  layers: [ plan ]
});
var switcher = new ol.control.LayerSwitcher();
map.addControl(switcher);
map.addControl(new ol.control.Permalink({ visible: false }));
map.addControl(new ol.control.PrintDialog({ openWindow: true, pdf: false }));

// A set of elevation layers
var layers = [
  {
    title: 'MNT SRTM3',
    url: 'https://data.geopf.fr/wms-r/wms',
    layer: 'ELEVATION.ELEVATIONGRIDCOVERAGE.SRTM3',
    //extent: [ -20037554.725947514, -8625918.87376409, 20037554.725947514, 8625918.87376409 ]
  },{
    title: 'MNS',
    url: 'https://data.geopf.fr/wms-r/wms',
    layer: 'ELEVATION.ELEVATIONGRIDCOVERAGE.HIGHRES.MNS',
    extent: [ -578959.605490584, 5203133.393641367, 921974.2487313666, 6643289.75487211 ]
  }, {
    title: 'MNT-RGE-Alti',
    url: 'https://data.geopf.fr/wms-r/wms',
    layer: 'ELEVATION.ELEVATIONGRIDCOVERAGE.HIGHRES',
    extent: [ -7007874.496280316, -1460624.494037931, 5043253.3127169, 6639937.650114076 ]
  }, {
    title: 'MNT BDAlti V1',
    url: 'https://data.geopf.fr/wms-r/wms',
    layer: 'ELEVATION.ELEVATIONGRIDCOVERAGE',
    extent: [ -7007874.496280316, -1460624.494037931, 5043253.3127169, 6639937.650114076 ]
  }
];

// Add tile layer
var layer = layers[0]
var elev = new ol.layer.Tile ({
  title: layer.title,
  extent: layer.extent,
  minResolution: 0,
  maxResolution: 197231.79878968254,
  source: new ol.source.TileWMS({
    url: layer.url,
    projection: 'EPSG:3857',
    attributions: [ 'Geoservices-IGN' ],
    crossOrigin: 'anonymous',
    params: {
      LAYERS: layer.layer,
      FORMAT: 'image/x-bil;bits=32',
      VERSION: '1.3.0'
    }
  })
});
elev.addFilter(new ol.filter.CSS({ blend:'multiply' }));
map.addLayer(elev);
elev.on('change', function() {
  switcher.drawPanel();
})

ol.layer.Geoportail.register("ELEVATION.ELEVATIONGRIDCOVERAGE.SHADOW", {"layer":"ELEVATION.ELEVATIONGRIDCOVERAGE.SHADOW","theme":"altimetrie","desc":"Couche d'ombrage calculée à partir des données altimétriques de l'IGN permettant de mieux appréhender le relief. L'estompage proposé est réalisé à partir des données MNT BDAlti au pas de 25m avec deux soleils : un au nord-est de hauteur 45°, l'autre zénithal.","server":"https://data.geopf.fr/wmts","bbox":[-63.187,-21.4069,55.8884,50.9218],"format":"image/png","minZoom":0,"maxZoom":15,"originators":{"Geoservices":{"attribution":"Géoservices","href":"https://geoservices.ign.fr/"}},"queryable":false,"style":"estompage_grayscale","tilematrix":"PM","title":"Estompage"});
var shadow = new ol.layer.Geoportail({
  title: 'Estompage - by IGN-France',
  className: 'blend',
  layer: 'ELEVATION.ELEVATIONGRIDCOVERAGE.SHADOW',
  visible: false,
});
// enhance opacity
shadow.getSource().setTileLoadFunction(ol.ext.imageLoader.pixelTransform(function(p, i) {
  p[i+3] *= 2.5;
}));
map.addLayer(shadow);

var hillshade = new ol.layer.Tile ({
	"title": "SRTM30 Hillshade - by terrestris",
  className: 'hillshade',
  opacity: .4,
	"extent": [
		-20037508.342789244,
		-7558415.656081782,
		20037508.342789244,
		8399737.889818361
	],
	"queryable": false,
	"minResolution": 0,
	"maxResolution": 156543.03392804097,
	"source": new ol.source.TileWMS({
		"url": "https://ows.mundialis.de/osm/service?",
		"projection": "EPSG:3857",
		"attributions": ['&copy; terrestris'],
		"crossOrigin": "anonymous",
		"params": {
			"LAYERS": "SRTM30-Hillshade",
			"FORMAT": "image/png",
			"VERSION": "1.3.0"
		}
	})
});
hillshade.addFilter(new ol.filter.CSS({ blend:'multiply' }));
map.addLayer(hillshade);

// http://soliton.vm.bytemark.co.uk/pub/cpt-city/
var tints0 = [
  [113,171,216],    // sea
  [217,242,255],    // sea side
  [192,220,160],    // coast
  [172,208,165],    
  [134,179,125],    // plains
  [160,190,140],
  [239,235,192],    // moutains
  [170,135,83],
  [148,108,51],     // mountains
  [230,230,230],    // snow
  [250,250,250],    // ice
  [255,255,255]     // ice
]
// Steps (for France)
var steps = [0,0,.15,2,2,8,8,20,70,50,10];
// Steps 
var steps = [0, 0, .1, 2, 2, 5, 20, 30, 120, 2, 50]
var maxAlti = 8600;
var useRGB = false;
var tints;
function calculateTints() {
  tints = [];
  steps.forEach((n0,s) => {
    var n = 10*n0;
    for (var i=0; i<n; i++) {
      tints.push([
        (tints0[s+1][0]*i+tints0[s][0]*(n-i))/n,
        (tints0[s+1][1]*i+tints0[s][1]*(n-i))/n,
        (tints0[s+1][2]*i+tints0[s][2]*(n-i))/n
      ])
    }
  });
}
calculateTints();

function setLayer(n) {
  if (n) {
    var layer = layers[n];
    elev.set('title', layer.title);
    elev.setSource(new ol.source.TileWMS({
      url: layer.url,
      projection: 'EPSG:3857',
      attributions: [ 'Geoservices-IGN' ],
      crossOrigin: 'anonymous',
      params: {
        LAYERS: layer.layer,
        FORMAT: 'image/x-bil;bits=32',
        VERSION: '1.3.0'
      }
    }));
    maxAlti = (n == 0 ? 8600 : 4800);
  }
  elev.getSource().setTileLoadFunction(alti);
}

tints0.forEach((t,i) => {
  if (i<tints0.length-1) {
    $('<input>')
      .val(steps[i])
      .css({ 'background-color': 'rgb('+t[0]+','+t[1]+','+t[2]+')' })
      .attr('title',i)
      .on('change', function() {
        steps[i] = parseFloat($(this).val());
        calculateTints();
        elev.getSource().setTileLoadFunction(alti);
      })
      .appendTo($('#scale'))
  }
});

// Color pixel / elevation
var alti = ol.ext.imageLoader.elevationMap(function(z) {
  if (!useRGB) {
    var pos, t;
    if (z>0) {
      pos = Math.min(tints.length-1, Math.round(z/maxAlti * tints.length));
      t = tints[pos];
    } else {
      t = tints0[0];
    }
    t[3] = 255;
    return t;
  } else {
    // rgb
    if (z<=0) return [0,0,0,0];
    z = Math.max(0, z/maxAlti);
    return getColor(180*(z+.1))
  }
});

elev.getSource().setTileLoadFunction(alti)

// Color pixel / elevation
tints0.forEach(t => t[3] = 255);
var seuil = [28,29,33,35,40,48,55,60,80,150,200]
var alti2 = ol.ext.imageLoader.elevationMap(function(z) {
  var pos, t;
  for (var i=0; i<seuil.length; i++) {
    if (z < seuil[i]) {
      if (i>0) {
        var n = Math.round(10*(seuil[i]-z)/(seuil[i]-seuil[i-1]));
        return [
          (tints0[i-1][0]*n + tints0[i][0]*(10-n))/10,
          (tints0[i-1][1]*n + tints0[i][1]*(10-n))/10,
          (tints0[i-1][2]*n + tints0[i][2]*(10-n))/10,
          255
        ]
      }
      return tints0[i]
    }
  }
  return tints0 [11]
});
/*
elev.getSource().setTileLoadFunction(alti2)
elev.getSource().refresh()
*/

var hue2rgb = function (h) {
  h = (h + 6) % 6;
  if (h < 1)
    return Math.round(h * 255);
  if (h < 3)
    return 255;
  if (h < 4)
    return Math.round((4 - h) * 255);
  return 0;
};

var getColor = function (v) {
  // Get hue
  var h = 4 - (0.04 * v);
  // Convert to RGB
  return [
    hue2rgb(h + 2),
    hue2rgb(h),
    hue2rgb(h - 2),
    255
  ];
};

</script>
</body>
</html>